<template>
	<view class="login">
		<view class="login_bk">
			<image mode="widthFix" class="login_bk_img" src="../../static/images/login_bk.png"></image>
		</view>
		<view class="login_box">
			<view class="login_top_box">
				<view class="welcome_text">
					<view class="w_text">欢迎使用</view>
					<image class="text_bk" mode="widthFix" src="/static/images/text_bk.png"></image>
				</view>
				<view class="login_top_text">云链视界</view>
			</view>

			<template v-if="type == 0">
				<view style="padding: 0 48rpx;color: #999999;font-size: 34rpx;">请选择您的登录方式</view>
				<view style="text-align: center;margin-top: 80rpx;">
					<image class="login_logo" src="../../static/images/logo.png"></image>
				</view>
				<view class="p-30">
					<view @click="login(1)" class="box-btn" style="background-color: #6CB500;color: #fff;">
						老师登录
					</view>
					<view @click="login(2)" class="box-btn">
						家长登录
					</view>
				</view>
			</template>
			<template v-else>
				<view style="padding: 0 48rpx;color: #999999;font-size: 34rpx;">请输入登录信息</view>
				<view style="text-align: center;margin-top: 80rpx;">
					<image class="login_logo" src="../../static/images/logo.png"></image>
				</view>
				<view class="p-30 login_input_box">
					<view class="login_input_cell">
						<input class="login_input" v-model="account" type="number" placeholder="请输入手机号" />
					</view>
					<view class="login_input_cell">
						<input class="login_input" v-model="password" :password="true" type="text"
							placeholder="请输入密码" />
					</view>
					<view class="flex-row justify-between align-center c-kinder">
						<view style="padding: 10rpx 0;" @click="login(type == 1 ? 2 : 1)">
							{{type == 1 ? '老师登录' : '家长登录'}}
						</view>
						<view style="padding: 10rpx 0;" class="flex-1" @click="forgetpassword">忘记密码?</view>
					</view>

					<view class="login_btn_box" @click="goLogin">
						<u-button shape="circle" text="选中登录代表您已同意"
							color="linear-gradient(to right, #C7E191, #AAD54D)"></u-button>
					</view>
					<!-- <view class="mobile_btn_block" @click="goWechatLogin">
						<image class="weixin_img" src="../../static/images/weixin.png"></image>
						<view class="ml-5">微信用户一键登录</view>
					</view> -->
					<!-- <view @click="goWechatLogin" class="text-c mt-10 f-16" style="color: #AAAAA9;">微信授权登录</view> -->
					<view class="agreement_box">
						<radio :checked="checked" color="#83C100" style="transform:scale(0.6)"
							@click="checked=checked?false:true"></radio>
						<view style="margin-left: -10rpx;" @click="checked=checked?false:true">选中登录代表您已同意</view>
						<view class="c-kinder" @click="showPop(1,'用户服务协议')">《用户服务协议》</view>
						<view class="c-kinder" @click="showPop(2,'隐私权政策')">《隐私权政策》</view>
					</view>
				</view>
			</template>

		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		login
	} from '@/common/api.js'
	export default {
		data() {
			return {
				type: 0,
				checked: false,
				account: '13333333331',
				password: '111111',
			}
		},
		methods: {
			goLogin() {

				var vm = this;
				console.log(vm.account);
				uni.showLoading({
					title: '登录中....'
				})
				if (!vm.account) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 1500
					});
					return false;
				}
				if (!(/^1[3456789]\d{9}$/).test(vm.account)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 1500
					});
					return false;
				}
				if (!vm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 1500
					});
					return false;
				}

				login({
					account: vm.account,
					password: vm.password,
					type: vm.type
				}).then(res => {
					uni.hideLoading();
					vm.$refs.uToast.show({
						type: 'success',
						message: '登录成功',
						complete() {
							console.log(res.userinfo);
							vm.loading = false
							uni.hideLoading()

							vm.$store.commit("setUserInfo", res.userinfo);
							vm.$store.commit("setShopInfo", res.shopinfo);

							if (vm.type == 1 && res.userinfo.is_teacher == 1) {
								vm.$store.commit("setTeacherInfo", res
									.teacherinfo);
							} 
							uni.reLaunch({
								url: "/pages/mine/index"
							})
						}
					})
				})
			},
			forgetpassword() {
				uni.navigateTo({
					url: '/pages/common/forgetpassword'
				})
			},
			login(e) {
				this.account = "";
				this.password = "";
				this.type = e
			},
			click(e) {
				if (e == 1) {
					this.$store.state.isTeacher = 1;
					uni.reLaunch({
						url: "/pages/teacher/index"
					})
				} else {
					this.$store.state.isTeacher = 0;
					uni.reLaunch({
						url: "/pages/mine/index"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {

		.login_bk {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;

			.login_bk_img {
				width: 100%;
				height: 100%;
			}
		}

		.login_box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;

			.login_top_box {
				margin-top: 150rpx;
				display: flex;
				align-items: flex-end;
				color: #020204;
				padding: 36rpx;
				letter-spacing: 2rpx;

				.welcome_text {
					width: 250rpx;
					height: 70rpx;
					position: relative;

					.w_text {
						font-size: 52rpx;
						font-weight: bold;
						text-align: center;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 3;
					}

					.text_bk {
						width: 240rpx;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 2;
					}
				}

				.login_top_text {
					font-size: 48rpx;
				}
			}

			.agreement_box {

				color: #666666;
				display: flex;
				align-items: center;
				font-size: 24rpx;
			}

			.login_logo {
				width: 204rpx;
				height: 204rpx;
			}

			.box-btn {
				width: 100%;
				height: 88rpx;
				background-color: #e8e8e8;
				border-radius: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
			}

			.login_btn_box {
				height: 88rpx;
				margin: 48rpx 0;
				position: relative;

				.block_btn_bk {
					width: 100%;
					height: 88rpx;
				}

				.login_btn_text {
					color: #ffffff;
					font-size: 28rpx;
					letter-spacing: 4rpx;
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 4;

					.weixin_img {
						width: 40rpx;
						height: 32rpx;
						margin-top: 4rpx;
					}
				}
			}

			.mobile_btn_block {
				margin: 30rpx 48rpx 0 48rpx;
				height: 88rpx;
				font-size: 28rpx;
				letter-spacing: 4rpx;
				border-radius: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #e8e8e8;
			}

			.login_input_box {
				padding: 30rpx;

				.login_input_cell {
					margin-bottom: 50rpx;
					border-bottom: 2rpx solid #BBBBBB;

					.login_input {
						font-size: 30rpx;
						padding: 28rpx 0;
						letter-spacing: 4rpx;
					}
				}

				.code_btn {
					color: #83C100;
					font-size: 24rpx;
					padding: 12rpx 20rpx;
					border-radius: 100rpx;
					letter-spacing: 2rpx;
					border: 2rpx solid #BBBBBB;
				}

				.code_btn_def {
					color: #9A9A9A;
				}
			}

			button {
				padding-left: 0 !important;
				padding-right: 0 !important;
				line-height: none !important;
				background-color: transparent !important;
			}

			button::after {
				border: none !important;
			}

		}

		.c-kinder {
			color: #83C100;
		}

	}
</style>